<template>
    <div class="userOrderList">
        <div class="userOrderList_header">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: backHomeStart+'EchartsList' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item disabled="true">订单中心</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: backHomeStart+'UserOrderList' }">订单列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-divider></el-divider>
        <div class="orderList_status">
            <div style="height: 40px;width: 200px;font-size: 18px">订单统计</div>
            <div class="progressleading" v-if="labels">
                <ul v-for="(label,index) in labels">
                    <li>
                        <span :style="'background-color :'+colors_F[index]">{{randNums[index]}}</span>
                        <span :style="'background-color :'+colors_S[index]">{{label}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <el-divider></el-divider>
        <div class="searchArea">
            <el-input v-model="search"
                      style="width: 150px;"
                      prefix-icon="el-icon-search"
                      placeholder="请输入内容"></el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <el-divider></el-divider>
        <el-row class="clear-filter">
            <el-button class="btn-right" @click="clearFilter" type="success" plain>清除筛选</el-button>
        </el-row>
        <el-scrollbar class="tableScrollbar">
            <el-table
                    ref="filterTable"
                    :data="pageInfo.list"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="uoOrderid"
                        label="订单编号"
                        sortable
                        align="center"
                        width="150%">
                    <template slot-scope="scope">

                        <el-tag v-if="scope.row.uoOrderid" type="info" effect="plain">
                            <p style="display: inline-block" v-text="getOrderListTime(scope.row.uoOrdertime)"></p>{{scope.row.uoOrderid}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="user.uUsername"
                        label="用户"
                        sortable
                        align="center"
                        width="90%"
                        column-key="user.uUsername">
                    <template slot-scope="scope">
                        <el-tag>
                            {{scope.row.user.uUsername}}
                        </el-tag>
                        <Avatar style="float: right" v-if="scope.row.user.uImgpath" :circle-url="startUrl+scope.row.user.uImgpath"></Avatar>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="user.uCity"
                        label="收件人"
                        align="center"
                        width="70%">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.user.uCity" type="info" effect="plain">
                            {{scope.row.user.uCity}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="uoOrdertime"
                        label="下单时间"
                        sortable
                        align="center"
                        width="165%">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.uoOrdertime" type="warning" effect="dark">
                            {{scope.row.uoOrdertime}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="uoShipmentstime"
                        label="发货时间"
                        sortable
                        align="center"
                        width="165%">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.uoShipmentstime" type="warning" effect="dark">
                            {{scope.row.uoShipmentstime}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="uoArrivaltime"
                        label="到货时间"
                        align="center"
                        sortable
                        width="165%">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.uoArrivaltime" type="warning" effect="dark">
                            {{scope.row.uoArrivaltime}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="uoConfirmreceipttime"
                        label="确认收货时间"
                        align="center"
                        sortable
                        width="165%">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.uoConfirmreceipttime" type="warning" effect="dark">
                            {{scope.row.uoConfirmreceipttime}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="uoOrderstatus"
                        label="订单状态"
                        align="center"
                        sortable
                        width="105%">
                    <template slot-scope="scope">
<!--                        <el-divider v-if="scope.row.uoOrderstatus==1||scope.row.uoOrderstatus==3"></el-divider>-->
                        <el-tag v-if="scope.row.uoOrderstatus==1" type="success" effect="dark">
                            {{orderStatus[scope.row.uoOrderstatus+1]}}
                        </el-tag>
                        <el-tag v-else-if="scope.row.uoOrderstatus==3" type="success" effect="dark">
                            {{orderStatus[scope.row.uoOrderstatus+1]}}
                        </el-tag>
                        <el-tag v-else type="danger" effect="dark">
                            {{orderStatus[scope.row.uoOrderstatus]}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="uoSaledstatus"
                        label="售后状态"
                        align="center"
                        width="105%">
                    <template slot-scope="scope">
                        <el-tag type="warning" effect="dark">
                            {{saledStatus[scope.row.uoSaledstatus]}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="105%"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                :type="controlSendButtom(scope.row.uoOrderstatus)==true ? 'info' : 'danger'"
                                :disabled="controlSendButtom(scope.row.uoOrderstatus)==true ? true : false"
                                @click="sendGoods(scope.$index, scope.row)">
                            {{scope.row.uoOrderstatus<=2 ? orderInfo[0] : orderInfo[1]}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSizes[0]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="datasCount">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    import Avatar from "../../components/Avatar";
    export default {
        name: "UserList",
        data(){
            return{
                colors_F:['#9bd16b','#e85927','#e88167','#e782b4','#75a9dc','#eb8400',],
                colors_S:['#b3e680','#FF6666','#FF9966','#FF99CC','#8abdf0','#FF9900',],
                search:'',
                orderStatus:["未付款","已付款","待发货","已发货","运输中","已送达","已签收","售后中"],
                orderInfo:["发货",'已发货'],
                orderIndex:'0',
                saledStatus:["待售后","待审核","待入库","待退款","待换货","售后成功"],
                pageInfo : {},
                filters : [],
                pageSizes : [],
                datasCount : 400,
                currentPage : 1,
                perPageSize : 5,
                pictures:[],
                sendButton:true,
                startUrl:this.$store.state.beginUrl,
                backHomeStart:this.$store.state.backHomeHeader,
                labels:["全部订单","已完成","取消订单","代收款","已发货","待收货"],
                randNums:[]
            }
        },
        created() {
            // console.log('创建前11');
            this.getDatas();
            this.getNums();
        },
        methods:{
            /*货物流程*/
            controlSendButtom(status){
                // console.log(status);
                let value = false;
                switch (status) {
                    case 0:
                        value = true;
                        break;
                    case 1:
                        value = false;
                        break;
                    case 2:
                        value = false;
                        break;
                    default:
                        value = true;
                        break;
                }
                return value;
            },
            getNums(){
                let total = null;
                for (let i = 0; i < 5 ; i++) {
                    let randNum = this.getRandNum();
                    this.randNums.push(randNum);
                    total +=randNum;
                }
                this.randNums.unshift(total);
            },
            getRandNum(){
                return Math.round(Math.random()*9999999)
            },
            getPageSizes(total){
                this.pageSizes.length = 0;
                for (let i = 0; i < total / 5 ; i++) {
                    this.pageSizes.push((i+1)*5);
                }
            },
            getDatas(){
                this.$axios.get('/userorderlist/list/'+this.currentPage+"/"+this.perPageSize).then(result=>{
                    this.pageInfo=result.data;
                    // console.log(this.pageInfo);
                    let goodsList = this.pageInfo.list;
                    /*标签去重*/
                    this.clearRepeatLabel(goodsList);
                    this.datasCount=this.pageInfo.total;
                    this.getPageSizes(this.datasCount);
                }).catch();
            },
            deleteById(id){
                this.$axios.get("/userorderlist/remove/"+id).then(result=>{
                    this.addResult(result.data);
                    this.getDatas();
                }).catch(err=>{
                    alert(err);
                })
            },
            clearRepeatLabel(goodsList){
                for (let i = 0; i < goodsList.length; i++) {
                    if (goodsList[i].goodslabel != '' && goodsList[i].goodslabel != null){
                        let checksame = false;
                        if (this.filters.length>0){
                            for (let j = 0; j <this.filters.length; j++) {
                                if (goodsList[i].goodslabel==this.filters[j].value){
                                    checksame = true;
                                    break;
                                }
                            }
                        }
                        if (checksame==false){
                            this.filters.push({ text: goodsList[i].goodslabel, value: goodsList[i].goodslabel});
                        }
                    }
                }
            },
            clearFilter() {
                this.$refs.filterTable.clearFilter();
            },
            filterTag(value, row) {
                return row.goodslabel === value;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            sendGoods(index, row) {
                // console.log(index, row);
                if (row.uoShipmentstime==null){
                    this.getCurrenTime(row);
                    row.uoOrderstatus +=2;
                }
                this.$axios.post("/userorderlist/update",row).then(result=>{
                    this.addResult(result.data);
                    this.getDatas();
                }).catch(err=>{
                    alert(err);
                })
            },
            getCurrenTime(row){
                const time = new Date().getTime();
                let date = this.$moment(time).format('YYYY-MM-DD HH:mm:ss');
                row.uoShipmentstime = date;
            },
            handleDelete(index, row) {
                // console.log(index, row.goodsid);
                this.deleteById(row.goodsid);
            },
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.perPageSize = val;
                this.getDatas();
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getDatas();
            },
            addResult(val) {
                this.$message({
                    showClose: true,
                    message: val===true?'恭喜你，发货成功！':'错误，发货失败！',
                    type: val===true?'success':'error'
                });
            },



            getOrderListTime(time){
                var vNow = new Date(time);
                var sNow = "";
                sNow += String(vNow.getFullYear());
                sNow += String(vNow.getMonth() + 1);
                sNow += String(vNow.getDate());
                sNow += String(vNow.getHours());
                sNow += String(vNow.getMinutes());
                sNow += String(vNow.getSeconds());
                sNow += String(vNow.getMilliseconds());
                return sNow.trim();
            },
        },
        computed:{

        },
        components:{
            Avatar
        }
    }
</script>

<style scoped>
    .block{
        height: 50px;
        width: 100%;
        /*border: 1px #9162ff solid;*/
        padding: 20px;
    }
    .container{
        /*border: 1px #89ffa5 solid;*/
    }
    .clear-filter{
        padding: 0;
        height: 40px;
    }
    .btn-left{
        float: left;
        margin-left: 8px;
    }
    .borderLine{
        border: 1px #ff6341 solid;
    }
    .el-table{
        /*border: 1px #ff6341 solid;*/
    }
    .btn-right{
        /*border: 1px red solid;*/
        float: right;
        margin-right: 8px;
    }
    .tableScrollbar{
        height: 63vh;
        /*border: 1px #ff6341 solid;*/
    }
    .searchArea{
        text-align: left;
    }
    .progressleading{
        overflow: hidden;
    }
    *{
        margin: 0;
        padding: 0;
    }
    ul>li{
        float: left;
        display: inline-block;
        list-style-type: none;
        width: 180px;
        height: 100px;
        /*outline: 1px #ff6341 solid;*/
        margin-left: 20px;
        text-align: center;
        border-radius: 10px;
    }
    ul>li>span:nth-child(1){
        display: inline-block;
        width: 180px;
        height: 60px;
        /*outline: 1px #ff6341 solid;*/
        color: white;
        line-height: 60px;
        font-size: 30px;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    }
    ul>li>span:nth-child(2){
        display: inline-block;
        width: 180px;
        height: 40px;
        /*outline: 1px #ff6341 solid;*/
        line-height: 40px;
        color: white;
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .orderList_status{
        width: 100%;
        height: 160px;
        /*outline: 1px #ff6341 solid;*/
        /*outline: 1px #ff6341 solid;*/
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    /deep/.el-table--scrollable-x{
        position: relative;
        display: block;
        /*width: 0;*/
        overflow-x: auto;
        /*height: 30px;*/
        cursor: pointer;
        /*border-radius: inherit;*/
        background-color: rgba(144,147,153,.3);
        -webkit-transition: .3s background-color;
        transition: .3s background-color;
    }
</style>